<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-06-15 09:44:55
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 11:08:15
 * @Description:
 *
-->

<template>
  <el-drawer
    class="svc-detail-drawer"
    :title="microServiceName"
    :visible="show"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :wrapper-closable="true"
    append-to-body
    size="700px"
    @close="closeClick"
  >
    <div class="main">
      <div class="title">资源详情</div>
      <div class="basic">
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">
            <span class="key">IP</span>
            <span class="value">{{ k8sClusterIp }}</span>
          </el-col>
          <el-col :span="12">
            <span class="key">可用区</span>
            <span class="value">{{ zoneId }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">
            <span class="key">云商信息</span>
            <span class="value">{{ cloudVenderChn }}</span>
          </el-col>
          <el-col :span="12">
            <span class="key">集群名称</span>
            <span class="value">{{ k8sClusterName }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="key">镜像</span>
            <span class="value">{{ images.join("/") }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="key">容器组</span>
            <span class="value">{{ podNames.join("/") }}</span>
          </el-col>
        </el-row>
        <div style="height: 1px; background: #f2f2f2"></div>
        <template v-for="(item, index) in usageChartSetting">
          <div :key="index + 'subt'" class="subtitle-usage">
            {{ item.title }}
          </div>
          <div :key="index + 'chartw'" class="chart-wrapper">
            <div class="current">
              <div class="num">
                {{ _data[item.key].current }}{{ item.unit }}
              </div>
            </div>
            <div :id="item.key + 'Line'" class="chart-line"></div>
          </div>
        </template>
      </div>
      <div class="title">风险预测</div>
      <div class="subtitle">{{ isGPU ? "显卡温度" : "CPU使用率" }}</div>
      <div id="predictionChartLine"></div>
      <div class="title">风险告警</div>
      <template v-if="isGPU">
        <div class="subtitle">显卡温度</div>
        <div id="gpuHeatChartWarningLine" class="warning-chart"></div>
      </template>
      <template v-else>
        <div class="subtitle">CPU使用率</div>
        <div id="cpuChartWarningLine" class="warning-chart"></div>
      </template>
      <div class="subtitle">请求响应时间</div>
      <div id="reqChartWarningLine" class="warning-chart"></div>
    </div>
  </el-drawer>
</template>

<script>
import * as echarts from 'echarts'
import {
  getMicroSvcUseInfo,
  getCpuRiskTrends,
  getAlarmSvcInfo,
  getIntelligentAlarmThreshold
} from '@/api/cnap/self-intelligence-ops'
import { getClusterProviderChn } from '@/utils/cnap/constant'
import { parseTime } from '@/utils/utils'

export default {
  name: 'SvcDetailDrawer',
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      microServiceName: '微服务详情',
      k8sClusterIp: '',
      k8sClusterName: '',
      zoneId: '',
      images: [],
      cloudVenderChn: '',
      podNames: [],
      cpuChart: {
        // cpu使用率
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      memChart: {
        // 内存使用率
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      reqChart: {
        // 请求响应时间
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      gpuChart: {
        // GPU使用率
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      gpuMemChart: {
        // 显存使用率
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      gpuHeatChart: {
        // 显卡温度
        chart: null,
        current: 0,
        xAxisData: [],
        seriesData: []
      },
      predictionChart: null,
      cpuChartWarning: null,
      gpuHeatChartWarning: null,
      reqChartWarning: null
    }
  },
  computed: {
    /**
     * @description: 是GPU
     * @return {*}
     */
    isGPU() {
      return this.info.arch === 'GPU'
    },
    /**
     * @description: 风险告警
     * @return {*}
     */
    warningChartSetting() {
      const cpuWarningSetting = [
        {
          title: 'CPU使用率',
          color: '#118CF8',
          key: 'cpuChartWarning',
          unit: '%'
        },
        {
          title: '请求响应时间',
          color: '#7211F8',
          key: 'reqChartWarning',
          unit: 'ms'
        }
      ]
      const gpuWarningSetting = [
        {
          title: '显卡温度',
          color: '#118CF8',
          key: 'gpuHeatChartWarning',
          unit: '℃'
        },
        {
          title: '请求响应时间',
          color: '#7211F8',
          key: 'reqChartWarning',
          unit: 'ms'
        }
      ]
      return this.isGPU ? gpuWarningSetting : cpuWarningSetting
    },
    /**
     * @description: 使用率图表设置
     * @return {*}
     */
    usageChartSetting() {
      const cpuUsageSetting = [
        {
          title: 'CPU使用率',
          color: '#118CF8',
          key: 'cpuChart',
          unit: '%'
        },
        {
          title: '内存使用率',
          color: '#52CEF7',
          key: 'memChart',
          unit: '%'
        },
        {
          title: '请求响应时间',
          color: '#7211F8',
          key: 'reqChart',
          unit: 'ms'
        }
      ]
      const gpuUsageSetting = [
        {
          title: 'GPU使用率',
          color: '#118CF8',
          key: 'gpuChart',
          unit: '%'
        },
        {
          title: '显存使用率',
          color: '#52CEF7',
          key: 'gpuMemChart',
          unit: '%'
        },
        {
          title: '显卡温度',
          color: '#7211F8',
          key: 'gpuHeatChart',
          unit: '℃'
        },
        {
          title: '请求响应时间',
          color: '#7211F8',
          key: 'reqChart',
          unit: 'ms'
        }
      ]
      return this.isGPU ? gpuUsageSetting : cpuUsageSetting
    }
  },
  watch: {
    /**
     * @description: 监听
     * @return {*}
     */
    show: {
      handler(newVal) {
        if (newVal) {
          this.microServiceName = this.info.microServiceName
          this.initData()
        }
      }
    }
  },
  created() {},
  methods: {
    /**
     * @description: 设置风险告警
     * @param {*} cpu
     * @param {*} req
     * @return {*}
     */
    setWaringCharts(cpu, req, gpuHeat) {
      const warningData = {
        cpuChartWarning: cpu,
        reqChartWarning: req,
        gpuHeatChartWarning: gpuHeat
      }
      this.warningChartSetting.forEach((element, index) => {
        const key = element.key
        this[key] = echarts.init(document.getElementById(key + 'Line')) // 初始化
        this[key].setOption({
          color: [element.color], // 颜色
          tooltip: {
            trigger: 'axis', // 触发
            backgroundColor: '#FFFFFF', // 背景色
            borderColor: '#E8E6F4', // 边框色
            borderWidth: 1, // 边框宽度
            // 自定义提示条
            formatter: (params, ticket, callback) => {
              const xAxisLable = '<div>' + params[0].data.time + '</div>'
              let content = ''
              content =
                content +
                '<div style="display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;">' +
                '<span>' +
                element.title +
                '</span><span style="margin-left: 10px;color:#4A4A4A;font-weight: bold;">' +
                params[0].data.value +
                element.unit;
              ('</span></div>')
              return (
                '<div style="box-sizing: border-box;font-size:12px;">' +
                xAxisLable +
                content +
                '</div>'
              )
            }
          },
          grid: {
            left: '5',
            right: '20',
            bottom: '0',
            top: '20',
            containLabel: true
          },
          xAxis: [
            // 横坐标
            {
              type: 'category', // 类型
              boundaryGap: false,
              axisLine: {
                // 线条样式
                show: false // 不显示
              },
              axisTick: {
                // 端点样式
                show: true, // 不显示
                lineStyle: {
                  color: 'rgba(65,97,128,0.45)'
                }
              },
              axisLabel: {
                // 文本样式
                show: true, // 显示
                interval: 0,
                rotate: 40,
                color: 'rgba(44,53,66,0.45)' // 颜色
              },
              data: warningData[key].xAxisData // 数据
            }
          ],
          yAxis: [
            // 纵坐标
            {
              type: 'value',
              max: warningData[key].max,
              splitNumber: 4,
              axisLabel: {
                // 文本样式
                show: true, // 显示
                formatter: '{value}' + element.unit,
                color: 'rgba(44,53,66,0.45)' // 颜色
              },
              axisTick: {
                // 端点样式
                show: false // 不显示
              },
              splitLine: {
                // 分割线样式
                show: true, // 显示
                lineStyle: {
                  color: 'rgba(65,97,128,0.15)', // 颜色
                  type: 'dashed' // 类型
                }
              }
            }
          ],
          series: [
            {
              type: 'line', // 类型
              smooth: true, // 光滑
              showSymbol: false, // 显示symbol
              markLine: {
                symbol: 'none',
                lineStyle: {
                  color: '#F66173'
                },
                label: {
                  position: 'insideStartTop',
                  distance: [2, 5],
                  color: '#F66173',
                  formatter: '预警线'
                },
                data: [
                  {
                    yAxis: warningData[key].threshold
                  }
                ]
              },
              lineStyle: {
                // 线条样式
                width: 2, // 宽度
                color: element.color // 颜色
              },
              areaStyle: {
                // 区域样式
                opacity: 1,
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: element.color + '30'
                  },
                  {
                    offset: 0,
                    color: '#ffffff3f'
                  }
                ])
              },
              data: warningData[key].seriesData // 数据
            }
          ]
        })
      })
    },
    /**
     * @description: 获取风险告警数据
     * @return {*}
     */
    async getRiskWarning() {
      const cpu = {
        xAxisData: [],
        seriesData: [],
        threshold: 0,
        max: 0
      }
      const req = {
        xAxisData: [],
        seriesData: [],
        threshold: 0,
        max: 0
      }
      const gpuHeat = {
        xAxisData: [],
        seriesData: [],
        threshold: 0,
        max: 0
      }
      // 请求微服务历史数据
      const resInfo = await getAlarmSvcInfo({
        k8sClusterName: this.info.k8sClusterName,
        microSvcNames: [this.info.microServiceName]
      })
      // CPU使用率
      if (resInfo.data && Array.isArray(resInfo.data.cpuUsage)) {
        for (const item of resInfo.data.cpuUsage) {
          cpu.xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
          if (Array.isArray(item.records) && item.records.length > 0) {
            cpu.max = Math.max(cpu.max, item.records[0].record)
            cpu.seriesData.push({
              value: item.records[0].record, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
        }
      }
      // 显卡温度
      if (resInfo.data && Array.isArray(resInfo.data.gpuTemps)) {
        for (const item of resInfo.data.gpuTemps) {
          gpuHeat.xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
          if (Array.isArray(item.records) && item.records.length > 0) {
            gpuHeat.max = Math.max(gpuHeat.max, item.records[0].record)
            gpuHeat.seriesData.push({
              value: item.records[0].record, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
        }
      }
      // 请求响应时间
      if (resInfo.data && Array.isArray(resInfo.data.reqCostTimes)) {
        for (const item of resInfo.data.reqCostTimes) {
          req.xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
          if (Array.isArray(item.records) && item.records.length > 0) {
            req.max = Math.max(req.max, item.records[0].record)
            req.seriesData.push({
              value: item.records[0].record, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
        }
      }
      const resThresholdCPU = await getIntelligentAlarmThreshold({
        indicatorName: 'CPU使用率',
        svcIds: [this.info.microSvcId]
      })
      cpu.threshold = Number(resThresholdCPU.data || '0')
      cpu.max = Math.max(cpu.max, cpu.threshold)
      const resThresholdReq = await getIntelligentAlarmThreshold({
        indicatorName: '请求响应时间',
        svcIds: [this.info.microSvcId]
      })
      req.threshold = Number(resThresholdReq.data || '0')
      req.max = Math.max(req.max, req.threshold)
      const resThresholdGPUHeat = await getIntelligentAlarmThreshold({
        indicatorName: '显卡温度',
        svcIds: [this.info.microSvcId]
      })
      gpuHeat.threshold = Number(resThresholdGPUHeat.data || '0')
      gpuHeat.max = Math.max(gpuHeat.max, gpuHeat.threshold)
      this.setWaringCharts(cpu, req, gpuHeat)
    },
    /**
     * @description: 显示图表
     * @param {*} xAxisData
     * @param {*} seriesData
     * @param {*} showMarkLine
     * @param {*} lowValue
     * @param {*} middleValue
     * @return {*}
     */
    setPredictionCharts(
      xAxisData,
      seriesData,
      showMarkLine,
      lowValue,
      middleValue
    ) {
      const options = {
        color: ['#5BBAF9'], // 颜色
        tooltip: {
          trigger: 'axis', // 触发
          backgroundColor: '#FFFFFF', // 背景色
          borderColor: '#E8E6F4', // 边框色
          borderWidth: 1, // 边框宽度
          // 自定义提示条
          formatter: (params, ticket, callback) => {
            const xAxisLable = '<div>' + params[0].data.time + '</div>'
            let content = ''
            content =
              content +
              '<div style="display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;">' +
              '<span>' +
              this.getPredictionTitle(params[0].dataIndex > 6) +
              '</span><span style="margin-left: 10px;color:#4A4A4A;font-weight: bold;">' +
              params[0].data.value +
              (this.isGPU ? '℃' : '%') +
              '</span></div>'
            return (
              '<div style="box-sizing: border-box;font-size:12px;">' +
              xAxisLable +
              content +
              '</div>'
            )
          }
        },
        grid: {
          left: '5',
          right: '20',
          bottom: '0',
          top: '20',
          containLabel: true
        },
        xAxis: [
          // 横坐标
          {
            type: 'category', // 类型
            boundaryGap: false,
            axisLine: {
              // 线条样式
              show: false // 不显示
            },
            axisTick: {
              // 端点样式
              show: true, // 不显示
              lineStyle: {
                color: 'rgba(65,97,128,0.45)'
              }
            },
            axisLabel: {
              // 文本样式
              show: true, // 显示
              interval: 0,
              color: 'rgba(44,53,66,0.45)' // 颜色
            },
            data: xAxisData // 数据
          }
        ],
        yAxis: [
          // 纵坐标
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 25,
            axisLabel: {
              // 文本样式
              show: true, // 显示
              formatter: '{value}' + (this.isGPU ? '℃' : '%'),
              color: 'rgba(44,53,66,0.45)' // 颜色
            },
            axisTick: {
              // 端点样式
              show: false // 不显示
            },
            splitLine: {
              // 分割线样式
              show: true, // 显示
              lineStyle: {
                color: 'rgba(65,97,128,0.15)', // 颜色
                type: 'dashed' // 类型
              }
            }
          }
        ],
        series: [
          {
            type: 'line', // 类型
            smooth: true, // 光滑
            showSymbol: false, // 显示symbol
            lineStyle: {
              // 线条样式
              width: 2, // 宽度
              color: '#5BBAF9' // 颜色
            },
            areaStyle: {
              // 区域样式
              opacity: 1,
              // 颜色渐变
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: '#5BC5F93f'
                },
                {
                  offset: 0,
                  color: '#ffffff3f'
                }
              ])
            },
            data: seriesData // 数据
          }
        ]
      }
      if (showMarkLine) {
        // 需要显示预测线
        options.series[0]['markLine'] = {
          symbol: 'none',
          data: [
            [
              {
                // 竖线
                coord: [6, 0], // 起点
                lineStyle: {
                  width: 1,
                  color: '#6DD400',
                  type: 'dashed'
                },
                label: {
                  show: false
                }
              },
              {
                // 竖线
                coord: [6, 100] // 终点
              }
            ],
            [
              // 低风险线
              {
                coord: [6, lowValue], // 从x轴中间开始
                lineStyle: {
                  color: '#F7B500',
                  type: 'dashed'
                },
                emphasis: {
                  disabled: true
                },
                label: {
                  show: true,
                  position: 'insideStartTop',
                  color: '#F7B500'
                }
              }, // 起点
              {
                coord: [13, lowValue] // 到x轴最后结束
              } // 终点
            ],
            [
              // 中风险线
              {
                coord: [6, middleValue], // 从x轴中间开始
                lineStyle: {
                  color: '#F66173',
                  type: 'dashed'
                },
                emphasis: {
                  disabled: true
                },
                label: {
                  show: true,
                  position: 'insideStartTop',
                  color: '#F66173'
                }
              }, // 起点
              {
                coord: [13, middleValue] // 到x轴最后结束
              } // 终点
            ]
          ]
        }
        options.series[0]['markArea'] = {
          emphasis: {
            disabled: false,
            label: {
              fontWeight: 700,
              position: 'insideLeft'
            },
            itemStyle: {
              opacity: 0.3
            }
          },
          data: [
            [
              {
                name: '低风险',
                coord: [6, lowValue], // 起点
                label: {
                  show: true,
                  color: '#6DD400',
                  position: 'insideLeft'
                },
                itemStyle: {
                  color: '#6DD400',
                  opacity: 0.1
                }
              },
              {
                coord: [13, 0] // 终点
              }
            ],
            [
              {
                name: '中风险',
                coord: [6, middleValue], // 起点
                label: {
                  show: true,
                  color: '#F7B500',
                  position: 'insideLeft'
                },
                itemStyle: {
                  color: '#F7B500',
                  opacity: 0.15
                }
              },
              {
                coord: [13, lowValue] // 终点
              }
            ],
            [
              {
                name: '高风险',
                coord: [6, 100], // 起点
                label: {
                  show: true,
                  color: '#F66173',
                  position: 'insideLeft'
                },
                itemStyle: {
                  color: '#F66173',
                  opacity: 0.2
                }
              },
              {
                coord: [13, middleValue] // 终点
              }
            ]
          ]
        }
      }
      this.predictionChart = echarts.init(
        document.getElementById('predictionChartLine')
      ) // 初始化
      this.predictionChart.setOption(options)
    },
    /**
     * @description: 获取风险预测数据
     * @return {*}
     */
    getRiskPrediction() {
      getCpuRiskTrends({
        microSvcId: this.info.microSvcId
        // microSvcId: 1
      }).then((res) => {
        if (res.data) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          if (Array.isArray(res.data.past_data)) {
            // 过去七天的数据
            for (const item of res.data.past_data) {
              xAxisData.push(parseTime(item.index, '{m}-{d}')) // 横坐标 格式化时间
              seriesData.push({
                value: item.value, // 百分比数值
                time: parseTime(item.index, '{y}-{m}-{d}') // 格式化时间
              })
            }
          }
          if (Array.isArray(res.data.predict_data)) {
            // 预测的七天的数据
            for (const item of res.data.predict_data) {
              xAxisData.push(parseTime(item.index, '{m}-{d}')) // 横坐标 格式化时间
              seriesData.push({
                value: item.value, // 百分比数值
                time: parseTime(item.index, '{y}-{m}-{d}') // 格式化时间
              })
            }
          }
          this.$nextTick(() => {
            this.setPredictionCharts(
              xAxisData,
              seriesData,
              res.data.is_present || false,
              res.data.alarm_thresh ? res.data.alarm_thresh.low_upper_limit : 0,
              res.data.alarm_thresh
                ? res.data.alarm_thresh.middle_upper_limit
                : 0
            )
          })
        }
      })
    },
    /**
     * @description: 风险预测标题
     * @param {*} isPrediction
     * @return {*}
     */
    getPredictionTitle(isPrediction) {
      return this.isGPU
        ? isPrediction
          ? '预测温度'
          : '使用温度'
        : isPrediction
          ? '预测使用率'
          : 'CPU使用率'
    },
    /**
     * @description: 设置图表
     * @return {*}
     */
    setUsageCharts() {
      this.usageChartSetting.forEach((element, index) => {
        const key = element.key
        this[key].chart = echarts.init(document.getElementById(key + 'Line')) // 初始化
        this[key].chart.setOption({
          color: [element.color], // 颜色
          tooltip: {
            trigger: 'axis', // 触发
            backgroundColor: '#FFFFFF', // 背景色
            borderColor: '#E8E6F4', // 边框色
            borderWidth: 1, // 边框宽度
            // 自定义提示条
            formatter: (params, ticket, callback) => {
              const xAxisLable = '<div>' + params[0].data.time + '</div>'
              let content = ''
              content =
                content +
                '<div style="display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;">' +
                '<span>' +
                element.title +
                '</span><span style="margin-left: 10px;color:#4A4A4A;font-weight: bold;">' +
                params[0].data.value +
                element.unit +
                '</span></div>'
              return (
                '<div style="box-sizing: border-box;font-size:12px;">' +
                xAxisLable +
                content +
                '</div>'
              )
            }
          },
          grid: {
            left: '5',
            right: '5',
            bottom: '5',
            top: '5',
            containLabel: false
          },
          xAxis: [
            // 横坐标
            {
              type: 'category', // 类型
              show: false,
              boundaryGap: false,
              axisLine: {
                // 线条样式
                show: false // 不显示
              },
              axisTick: {
                // 端点样式
                show: false // 不显示
              },
              axisLabel: {
                // 文本样式
                show: true, // 显示
                color: '#C4C6CC' // 颜色
              },
              data: this[key].xAxisData // 数据
            }
          ],
          yAxis: [
            // 纵坐标
            {
              type: 'value',
              show: true,
              axisLabel: {
                // 文本样式
                show: true, // 显示
                formatter: '{value}' + element.unit,
                color: '#C4C6CC' // 颜色
              },
              axisTick: {
                // 端点样式
                show: false // 不显示
              },
              splitNumber: 3,
              splitLine: {
                // 分割线样式
                show: true, // 显示
                lineStyle: {
                  color: '#E9E8E8', // 颜色
                  type: 'dashed' // 类型
                }
              }
            }
          ],
          series: [
            {
              type: 'line', // 类型
              smooth: true, // 光滑
              showSymbol: false, // 显示symbol
              lineStyle: {
                // 线条样式
                width: 2, // 宽度
                color: element.color // 颜色
              },
              areaStyle: {
                // 区域样式
                opacity: 1,
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: element.color + '30'
                  },
                  {
                    offset: 0,
                    color: 'rgba(87,250,200,0)'
                  }
                ])
              },
              data: this[key].seriesData // 数据
            }
          ]
        })
      })
    },
    /**
     * @description: 获取微服务基本使用情况
     * @return {*}
     */
    getMicroSvcUseInfo() {
      getMicroSvcUseInfo({
        cloudVendor: this.info.cloudVendor,
        regionId: this.info.regionId,
        zoneId: this.info.zoneId,
        clusterName: this.info.k8sClusterName,
        microSvcName: this.info.microServiceName
      }).then((res) => {
        this.k8sClusterIp = res.data ? res.data.k8sClusterIp : ''
        this.k8sClusterName = res.data ? res.data.k8sClusterName : ''
        this.zoneId = res.data ? res.data.zoneId : ''
        this.images = res.data ? res.data.images : ''
        this.cloudVenderChn = res.data
          ? getClusterProviderChn(
            this.$store.state.app.cloudVendors,
            res.data.cloudVender
          )
          : ''
        this.podNames = res.data ? res.data.podNames : ''
        // cpu使用率
        if (
          res.data &&
          Array.isArray(res.data.cpuUseModels) &&
          res.data.cpuUseModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.cpuUseModels) {
            xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.cpuUsePercent, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.cpuChart.current =
            res.data.cpuUseModels[
              res.data.cpuUseModels.length - 1
            ].cpuUsePercent
          this.cpuChart.xAxisData = xAxisData
          this.cpuChart.seriesData = seriesData
        }
        // 内存使用率
        if (
          res.data &&
          Array.isArray(res.data.memUseModels) &&
          res.data.memUseModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.memUseModels) {
            xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.memUsePercent, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.memChart.current =
            res.data.memUseModels[
              res.data.memUseModels.length - 1
            ].memUsePercent
          this.memChart.xAxisData = xAxisData
          this.memChart.seriesData = seriesData
        }
        // 请求响应时间
        if (
          res.data &&
          Array.isArray(res.data.gatewayLogModels) &&
          res.data.gatewayLogModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.gatewayLogModels) {
            xAxisData.push(parseTime(item.createTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.reqCost, // 百分比数值
              time: parseTime(item.createTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.reqChart.current =
            res.data.gatewayLogModels[
              res.data.gatewayLogModels.length - 1
            ].reqCost
          this.reqChart.xAxisData = xAxisData
          this.reqChart.seriesData = seriesData
        }
        // GPU使用率
        if (
          res.data &&
          Array.isArray(res.data.gpuUseModels) &&
          res.data.gpuUseModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.gpuUseModels) {
            xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.gpuUsePercent, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.gpuChart.current =
            res.data.gpuUseModels[
              res.data.gpuUseModels.length - 1
            ].gpuUsePercent
          this.gpuChart.xAxisData = xAxisData
          this.gpuChart.seriesData = seriesData
        }
        // 显存使用率
        if (
          res.data &&
          Array.isArray(res.data.gpuMemUseModels) &&
          res.data.gpuMemUseModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.gpuMemUseModels) {
            xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.gpuMemUsePercent, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.gpuMemChart.current =
            res.data.gpuMemUseModels[
              res.data.gpuMemUseModels.length - 1
            ].gpuMemUsePercent
          this.gpuMemChart.xAxisData = xAxisData
          this.gpuMemChart.seriesData = seriesData
        }
        // 显卡温度
        if (
          res.data &&
          Array.isArray(res.data.gpuTempUseModels) &&
          res.data.gpuTempUseModels.length > 0
        ) {
          const xAxisData = [] // 横坐标
          const seriesData = [] // 纵坐标
          for (const item of res.data.gpuTempUseModels) {
            xAxisData.push(parseTime(item.recordTimestamp, '{h}:{i}')) // 横坐标 格式化时间
            seriesData.push({
              value: item.gpuTemp, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          }
          this.gpuHeatChart.current =
            res.data.gpuTempUseModels[
              res.data.gpuTempUseModels.length - 1
            ].gpuTemp
          this.gpuHeatChart.xAxisData = xAxisData
          this.gpuHeatChart.seriesData = seriesData
        }
        this.$nextTick(() => {
          this.setUsageCharts()
        })
      })
    },
    /**
     * @description: 初始化
     * @return {*}
     */
    initData() {
      this.getMicroSvcUseInfo()
      this.getRiskPrediction()
      this.getRiskWarning()
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description:
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.svc-detail-drawer {
  .main {
    padding: 20px 30px;

    .title {
      box-sizing: border-box;
      height: 40px;
      line-height: 40px;
      background: #f1f1f1;
      .textStyle(16px, 500, #4a4a4a);
      padding-left: 20px;
    }

    .basic {
      background: #fdfdfd;
      border: 1px solid #ececec;
      border-top: none;
      padding: 20px;
      margin-bottom: 30px;

      .key {
        .textStyle(14px, 400, #C3C3C3);
        line-height: 20px;
        margin-right: 10px;
        display: inline-block;
      }
      .value {
        .textStyle(14px, 500, #4a4a4a);
        line-height: 20px;
        display: inline-block;
      }
      .subtitle-usage {
        margin: 20px 0 15px;
        .textStyle(14px, 500, #4a4a4a);
        line-height: 20px;
      }
      .chart-wrapper {
        display: flex;
        align-items: center;
        height: 80px;
        .current {
          margin-right: 30px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: url("~@/assets/imgs/self-intelligence-ops/bg_usage.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          .num {
            text-align: center;
            line-height: 80px;
            .textStyle(20px, 600, #FFFFFF);
          }
        }
        .chart-line {
          flex: 1;
          height: 100%;
        }
      }
    }

    #predictionChartLine {
      height: 170px;
      margin-bottom: 30px;
    }

    .subtitle {
      .textStyle(14px, 500, #4a4a4a);
      line-height: 20px;
      margin-top: 10px;
      padding-left: 20px;
    }
    .warning-chart {
      height: 170px;
    }
  }
}
</style>
